﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../js/jq/jquery.lastest.js"></script>
    <script src="../../../js/ko/knockout.lastest.js"></script>

    <script src="../../../js/core/jquery.splitter.js"></script>
    <script src="../../../js/core/CCSV.js"></script>

    <link href="css/index.css" rel="stylesheet" />
    <script src="js/index.js"></script>

    <script type="text/javascript">
        function CPortfolioViewModel(code, name, password, birthdate, national, favorite) {
            //-----------------------------------------------------
            // Properties
            //-----------------------------------------------------
            self = this;
            self.Code = ko.observable(code);
            self.Name = ko.observable(name);
            self.Password = ko.observable(password);
            self.Birthdate = ko.observable(birthdate);
            self.National = ko.observable(national);
            self.Favorite = ko.observable(favorite);

            self.Nationals = [];
            self.Favorites = [];

            //-----------------------------------------------------
            // Behaviours.Client
            //-----------------------------------------------------
            self.showInfo = function () {
                console.log('showInfo', ko.toJSON(self));
            };


            //-----------------------------------------------------
            // Behaviours.CallServer
            //-----------------------------------------------------
            self.init = function () {
                $.post('service/data.ashx',
                    { action: 'getInfo' },
                    function (data) {                        
                        var list = data.CSV2JSON2();
                        
                        self.Nationals = list[1];
                        self.Favorites = list[2];

                        ko.applyBindings(self);
                    });
            };
            self.getByID = function (id) {
            };
            self.save = function () {
            };
        }

        $(function () {
            var portVM = new CPortfolioViewModel("Bill", "Thiên Tuấn", "123456", "2006-03-20", 1, 1);
            portVM.init();
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>Portfolio Information</legend>
        <div>
            <label>
                Code:
            </label>
            <input type="text" title="Code" class="wMid" data-bind="value: Code"/>
        </div>
        <div>
            <label>
                Name:
            </label>
            <input type="text" title="Name" class="wLong" data-bind="value: Name"/>
        </div>
        <div>
            <label>
                Password:
            </label>
            <input type="password"  class="wMid" data-bind="value: Password"/>
        </div>
        <div>
            <label>
                Birth date:
            </label>
            <input type="date" class="wLong" data-bind="value: Birthdate"/>
        </div>
        <div>
            <label>
                National:
            </label>
            <select class="wLong" data-bind="options: Nationals, value:National, optionsText:'Name', optionsValue:'ID'"></select>
        </div>
        <div>
            <label>
                Favorite:
            </label>
            <select class="wLong" multiple=""  data-bind="options:Favorites, value:Favorite, optionsText:'Name', optionsValue:'ID'">
            </select>
        </div>
        <div>
            <label>&nbsp;</label>
            <input class="wMid" type="button" name="" value="Save" data-bind="click: save"/>
            <input class="wMid" type="button" name="" value="Show Info" data-bind="click: showInfo"/>
        </div>
    </fieldset>
</body>
</html>
